<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!--
    链接： 
    https://cn.vuejs.org/guide/introduction.html#api-styles
    https://cn.vuejs.org/guide/extras/composition-api-faq.html#what-is-composition-api
-->

<body>
    <div id="app"></div>
    <div id="modal"></div>
</body>
<script src="js/vue.js"></script>
<script>

    const app = Vue.createApp({
        // setup 中不能调用到 options 中的内容，以及生命周期中的任何内容
        // setup 主要是取代 options 中的 data 以及一些选项
        // setup 在钩子函数 beforeMount 之前执行
        setup(props, context){
            console.log(props, context);
            return {
                msg: "组合式API",
                log: ()=>{
                    console.log("点击事件");
                }
            }
        },
        methods:{
            deal(){
                console.log("选项式中的 deal 方法");
                // 这里是可以调用 setup 中的内容
                console.log("deal() ----->", this.$options.setup());  // 这里是输出上面 setup 整个定义的内容
                console.log("deal() ----->", this.$options.setup);    // 这里输出 setup 中的返回值
            }
        },
        template: `
        <div class="box">
          <h3> {{msg}} </h3>
        </div>
        <div>
            <button @click="log">触发点击 log 事件</button>
            <button @click="deal">触发点击 deal 事件</button>
        </div>
        `,
    }).mount("#app");

</script>

</html>